---
import BaseLayout from '../../layouts/BaseLayout.astro';
import { CustomRoadmap } from '../../components/CustomRoadmap/CustomRoadmap';
import { SkeletonRoadmapHeader } from '../../components/CustomRoadmap/SkeletonRoadmapHeader';
import Loader from '../../components/Loader.astro';
import ProgressHelpPopup from '../../components/ProgressHelpPopup.astro';
---

<BaseLayout title='Roadmaps' noIndex={true}>
  <ProgressHelpPopup />
  <div>
    <div class='flex min-h-[550px] flex-col'>
      <div data-roadmap-loader class='flex w-full grow flex-col'>
        <SkeletonRoadmapHeader />
        <div class='flex grow items-center justify-center'>
          <Loader />
        </div>
      </div>
      <CustomRoadmap client:only='react' />
    </div>
  </div>
</BaseLayout>
